<template>
  <view class="containter">
    <image class="bgImg" src="../../static/images/bgImg.png" mode="widthFix"></image>
    <view style="width: 100vw;height: 100vh;position: absolute;top: 10;left: 20;z-index: 100;">
      <view class="flex flex-center" style="margin-top: 152rpx;">
        <image class="headerBg" src="../../static/images/headerBg.png" mode=""></image>
      </view>
      <view class="login-warpper">
        <view class="login-warpper-item flex flex-between align-center">
          <image class="icon" src="../../static/images/phone.png" mode=""></image>
          <!-- <input class="ipt" placeholder-class="styles" v-model="fromLine.username" type="text" placeholder="请输入CRM账号"> -->
          <uv-input placeholder="请输入CRM账号" border="none" v-model="fromLine.username"></uv-input>
        </view>
        <view class="login-warpper-item flex flex-between align-center">
          <image class="icon" src="../../static/images/clock.png" mode=""></image>
          <!-- <input class="ipt" placeholder-class="styles" v-model="fromLine.password" :type="flag?'password':'text'"
            placeholder="请输入密码"> -->
          <uv-input placeholder="请输入密码" :password="flag" border="none" v-model="fromLine.password"></uv-input>
          <image class="psdIcon" :src="flag?'../../static/images/hide.png':'../../static/images/show.png'" mode=""
            @click="handleToggle"></image>
        </view>
        <view style="text-align: right;margin-top: 20rpx;">
          <text class="forgotword" @click="toEditPasswPage">忘记密码</text>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="btn" @click="handleLogin">登录</view>
      <view class="roomDesc-title">
        <text class="line"></text>
        <text class="txt">本系统仅限内部员工使用</text>
        <text class="line"></text>
      </view>
    </view>
    <!--    <uv-popup ref="popup" mode="bottom" :close-on-click-overlay="false">
      <view class="userInfo">
        <view class="userInfo-tp">
          <image class="userInfo-tp-img" src="../../static/images/logo.jpg" mode=""></image>
          <text class="userInfo-tp-txt">CRM 申请</text>
        </view>
        <view class="title">请点击获取您的昵称头像</view>
        <view class="desc">提供具有辨识度的用户中心界面</view>
        <view class="myInfo_item">
          <view class="flTxt">头像</view>
          <view class="flex align-center btns">
            <button class="reset_button" open-type="chooseAvatar" @chooseavatar="chooseavatar">
              <image class="avatar" :src="info.avatar || '../../static/images/moren.png'"></image>
            </button>
          </view>
        </view>
        <view class="myInfo_item">
          <view class="flTxt">昵称</view>
          <view class="flex align-center" style="flex: 1">
            <input class="inputClass" v-model="info.name" type="nickname" bindblur="getNickname" />
          </view>
        </view>
        <view class="saveBtn-warp">
          <view v-if="!isFlag" class="saveBtn" @click="handleClick"> 保存 </view>
          <view v-if="isFlag" class="activeClass" @click="handleSave"> 保存 </view>
        </view>
      </view>
    </uv-popup> -->
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        fromLine: {
          username: "",
          password: "",
        },
        flag: true,
        // info: {
        //   avatar: "",
        //   name: "",
        // },
        userInfo: {}
      }
    },
    // computed: {
    //   isFlag() {
    //     if (this.info.avatar && this.info.name) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   }
    // },
    onShow() {
      let accountInfo = uni.getStorageSync("accountInfo");
      if(accountInfo?.username){
        this.fromLine = {...accountInfo};
      }
    },
    methods: {
      // handleSave() {
      //   reqApi.editUserInfo(this.info).then(res => {
      //     uni.showToast({
      //       title: "登录成功",
      //       icon: 'none',
      //       mask: true,
      //       duration: 1500,
      //     })
      //     setTimeout(() => {
      //        	// is_operation 是否运营  is_seller是否商务
      //       if (this.userInfo.is_operation == 1) {
      //         uni.reLaunch({
      //           url: "/pages/order/orderList"
      //         })
      //       }
      //       if (this.userInfo.is_seller == 1) {
      //         uni.reLaunch({
      //           url: "/pages/order/takeOrderList"
      //         })
      //       }
      //     }, 1500)
      //   })
      // },
      // chooseavatar(e) {
      //   console.log("获取默认头像", e);
      //   uni.uploadFile({
      //     filePath: e.detail.avatarUrl,
      //     name: 'file',
      //     url: this.baseUrl + "/api/file/upload", //接口地址
      //     header: {
      //       "Authorization": 'Bearer ' + uni.getStorageSync("token"),
      //     },
      //     success: (uploadFileRes) => {
      //       console.log("接口地址", JSON.parse(uploadFileRes.data));
      //       let res = JSON.parse(uploadFileRes.data);
      //       this.info.avatar = res.data.url;
      //     }
      //   });
      // },
      // getNickname(e) {
      //   this.info.name = e.detail.value;
      // },
      toEditPasswPage(){
        console.log("点击忘记密码")
        uni.navigateTo({
          url: "/pages/login/editPassword"
        })
      },
      async handleLogin() {
        if (!this.fromLine.username) {
          uni.showToast({
            title: "账号不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.fromLine.password) {
          uni.showToast({
            title: "密码不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        let res = await reqApi.login(this.fromLine);
        console.log("登录信息", res);
        uni.setStorageSync("token", res.data.token);
        // if (!res.data.openid) {
        //   let code = await this.getCode();
        //   console.log("微信code", code);
        //   let wechatRes = await reqApi.bindWechat({
        //     code
        //   })
        //   console.log("wechatRes", wechatRes);
        // }
        let code = await this.getCode();
        console.log("微信code", code);
        let wechatRes = await reqApi.bindWechat({
          code
        })
        let resp = await reqApi.getUserInfo({});
        uni.setStorageSync("userInfo", resp.data);
        console.log("用户信息", resp.data);
        // this.userInfo = resp.data;
        // this.$refs.popup.open();
        // 商务存在手机号,直接进入首页,不存在跳转个人信息页面绑定手机号,运营不做手机号判断
        // is_operation 是否运营  is_seller是否商务
        if(resp.data.phone){
          uni.showToast({
            title: "登录成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(() => {
            if(resp.data.is_operation == 1){
              uni.reLaunch({
                url: "/pages/order/orderList"
              })
            }
            if(resp.data.is_seller == 1){
              uni.reLaunch({
                url: "/pages/order/takeOrderList"
              })
            }
          }, 1500)
        }else{
          uni.showToast({
            title: "暂无手机号,请到个人中心页面绑定手机号",
            icon: 'none',
            mask: true,
            duration: 1500
          })
          setTimeout(() => {
            uni.navigateTo({
              url: `/pages/mine/userInfo?prevpage=home`
            })
          }, 1500)
        }
        uni.setStorageSync("accountInfo", this.fromLine);
      },
      getCode() {
        return new Promise((resolve, reject) => {
          uni.login({
            provider: 'weixin', //使用微信登录
            success: function(loginRes) {
              resolve(loginRes.code)
            }
          });
        })
      },
      handleToggle() {
        this.flag = !this.flag;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .forgotword{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #1071E7;
  }
  .roomDesc-title {
    margin-top: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .txt {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #222;
      margin: 0 15rpx;
    }

    .line {
      width: 50rpx;
      height: 2rpx;
      background: #222;
    }
  }

  .saveBtn-warp {
    display: flex;
    justify-content: center;

    .activeClass {
      width: 337rpx;
      height: 72rpx;
      background: #07C160;
      border-radius: 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #fff;
      text-align: center;
      line-height: 72rpx;
      margin-top: 72rpx;
    }

    .saveBtn {
      width: 337rpx;
      height: 72rpx;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #cccccc;
      text-align: center;
      line-height: 72rpx;
      margin-top: 72rpx;
    }
  }

  .reset_button {
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    background-color: transparent;
    color: inherit;
  }

  .reset_button::after {
    border: none;
  }

  .avatar {
    width: 76rpx;
    height: 76rpx;
    border-radius: 50%;
    vertical-align: middle;
  }

  .myInfo_item {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #f9f9f9;

    .flTxt {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
      margin-right: 84rpx;
    }
  }

  .userInfo {
    padding: 36rpx 44rpx;
    box-sizing: border-box;

    .userInfo-tp {
      position: relative;
      display: flex;
      align-items: center;

      .userInfo-tp-img {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
      }

      .userInfo-tp-txt {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
        margin-left: 10rpx;
      }
    }

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #000000;
      margin-top: 32rpx;
    }

    .desc {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #aaaaaa;
      margin-top: 8rpx;
    }
  }

  .headerBg {
    width: 292rpx;
    height: 322rpx;
  }

  .psdIcon {
    width: 48rpx;
    height: 48rpx;
  }

  .containter {
    width: 100vw;
    height: 100vh;
    background: #fff;
    position: relative;

    .bgImg {
      position: absolute;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 10;
    }

    .header {
      padding: 50rpx;
      box-sizing: border-box;

      .header-line {
        width: 8rpx;
        height: 36rpx;
        background: #1071E7;
        border-radius: 44rpx;
        margin-right: 20rpx;
      }

      .header-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 40rpx;
        color: #323233;
      }
    }

    .login-warpper {
      padding: 50rpx;
      box-sizing: border-box;

      .login-warpper-item {
        height: 96rpx;
        margin-top: 48rpx;
        border-bottom: 2rpx solid #eee;

        .icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 20rpx;
        }

        .ipt {
          flex: 1;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #222;
        }

        .styles {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #C8C9CC;
        }
      }
    }

    .footer {
      position: fixed;
      bottom: 30rpx;
      padding: 50rpx;
      box-sizing: border-box;
      width: 100%;
      z-index: 100;

      .btn {
        width: 100%;
        height: 88rpx;
        background: #1071E7;
        border-radius: 44rpx;
        text-align: center;
        line-height: 88rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
      }
    }
  }
</style>